<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>列表 - 文件列表</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" />
</head>

<body>

    <ul class="mdui-list" style="max-width: 360px;">
        <li class="mdui-subheader-inset">Folders</li>
        <li class="mdui-list-item">
            <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
            <div class="mdui-list-item-content">
                <div class="mdui-list-item-title">Photos</div>
                <div class="mdui-list-item-text">Jan 9, 2014</div>
            </div>
            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
        </li>
        <li class="mdui-list-item">
            <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
            <div class="mdui-list-item-content">
                <div class="mdui-list-item-title">Recipes</div>
                <div class="mdui-list-item-text">Jan 17, 2014</div>
            </div>
            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
        </li>
        <li class="mdui-list-item">
            <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
            <div class="mdui-list-item-content">
                <div class="mdui-list-item-title">Work</div>
                <div class="mdui-list-item-text">Jan 28, 2014</div>
            </div>
            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
        </li>
        <li class="mdui-subheader-inset">Files</li>
        <li class="mdui-list-item">
            <i
                class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
            <div class="mdui-list-item-content">
                <div class="mdui-list-item-title">Photos</div>
                <div class="mdui-list-item-text">Jan 9, 2014</div>
            </div>
            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
        </li>
        <li class="mdui-list-item">
            <i
                class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
            <div class="mdui-list-item-content">
                <div class="mdui-list-item-title">Kitchen remodel</div>
                <div class="mdui-list-item-text">Jan 10, 2014</div>
            </div>
            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
        </li>
    </ul>

    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
</body>

</html>